<template>
	<div>
		<!--:pagination="pagination" @change="handleTableChange"-->
		<a-table bordered :pagination="false" :loading="loading"
						 :columns="columns" :data-source="resSource"
		>
		</a-table>
	</div>
</template>

<script lang="ts">
	import {Component, Prop, Vue} from 'vue-property-decorator'
	@Component({
		components: {

		}
	})
	export default class SelfQuery extends Vue {
		@Prop() private resultData:any
		private	 loading = true
		private resSource = []
		private columns:Array<any> = []
		private pagination = {
			total: 0,
			pageSize: 10,//每页中显示10条数据
			showSizeChanger: true,
			pageSizeOptions: ["10", "20", "50", "100"],//每页中显示的数据
			showTotal:( total:any) => `共有 ${total} 条数据`,  //分页中显示总的数据
		}
		mounted(): void {
			if(this.resultData && this.resultData.length >0 ){
				//加key值，防止a-table报错
				let addKey = this.resultData
				let counst = 1
				for(let i = 0 ; i < addKey.length ; i ++ ){
					addKey[i].key = counst++
				}
				this.resSource = addKey
				//表头筛选
				let tabHeader = this.resultData[0]
				for(let k in tabHeader){
					let obj ={}
					if (k === 'key') {
						obj = {align: "center", title:'编号', dataIndex: k, key: k}
					}else{
						obj = {align: "center", title:k, dataIndex: k, key: k}
					}
					this.columns.unshift(obj)
				}
				this.loading = false
			}else {
				this.resSource = []
				this.loading = false
			}
		}

		//列表分页事件
		/*handleTableChange(pagination:any) {
			this.$emit("resultTableChange", pagination)
		}*/

	}
</script>

<style lang="scss" scoped>
	/deep/.ant-table-body{
		overflow-x: scroll !important;
		&::-webkit-scrollbar {//整体样式
			height: 6px;
		}
		&::-webkit-scrollbar-thumb {//滑动滑块条样式
			border-radius: 4px;
			-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
			// background: #00aaff;
			background: #e6e6e6;
		}
		&::-webkit-scrollbar-track {//轨道的样式
			-webkit-box-shadow: 0;
			border-radius: 0;
			background: #f6f6f6;
		}
	}

</style>
